<template>
	<view>
		<view class=" bg-grey  allhw-vh">
			<!-- 搜索相关的东西 -->
			<im-navBar 
				ref="navBarRef"
				@rightActionSelectedFu="navBarRightActionSelectedFu"
				:rightActionList="navBarRightActionList"
				:show="!showSearchModel"  :navbarText="navbarText"  rightAction rightIcon="add" selectedRightIcon="close"></im-navBar>
		
			<scroll-view class="scroll-container bg-grey animation-slide-left " scroll-y scroll-with-animation :class="showSearchModel?'':'paddig-top-70'"
				enable-back-to-top>
				<view class=" bg-grey padding-sm-sm">
					<view class="tui-flex tui-center" >
						<view class="tui-col-1 tui-center">
								<tui-icon name="search tui-flex" size="30" unit="rpx"></tui-icon>
						</view>
						<view class=" tui-flex tui-col-10" :class="showSearchModel?'tui-center':'tui-align-left'">
							<input @focus="toShowSearchFu" @input="toSearchFu"  class="input-search-placeholder tui-col-11 tui-input  round_view bg-white  tui-center " placeholder="搜索" v-model="searchKey"
							 >
							</input>
						</view>
						<view v-if="showSearchModel" class=" text-center text-green text-30 tui-col-1 animation-slide-right" @click=" toUnShowSearchFu ">取消</view>
					</view>
				</view>
				<view v-if="showSearchModel" class="animation-scale-up detail-view   padding-sm">
					<im-chatlist :searchKey="searchKey"></im-chatlist>
				</view>
				<view v-else class="magin-top-10 animation-scale-down detail-view  padding-sm">
					<im-chatlist></im-chatlist>
				</view>
			</scroll-view>
		</view>
	<!-- 虚浮框-小程序模式才会有 -->
					<!-- #ifdef MP -->
							<im-addBtn v-if="ImConfig.chatPage.showAddBtn"></im-addBtn>
					<!-- #endif -->
		<!-- 下方菜单栏 -->
		<tab-bar  class="" :current="pageIndex" />
	</view>
</template>


<script>
	import ImStorage from '../../sdk/utils/ImStorage.js'
	import ImEnum from '../../sdk/enums/index.js'
	import imConfig from '../../sdk/config/index.js'
	export default {
		data() {
			return {
				copyright:"Copyright © 2020 BenderCoder. ",
				pageIndex: 0,
				navbarText: '消息',
				showSearchModel: false,
				showAddButModel: false,
				searchKey: '',
				navBarRightActionList: [
					{
						id: '0',
						name: '发起群聊',
						icon: 'message-fill'
					},
					{
						id: '1',
						name: '添加好友',
						icon: 'friendadd-fill'
					},
					{
						id: '2',
						name: '扫一扫',
						icon: 'sweep'
					},
					{
						id: '3',
						name: '二维码',
						icon: 'qrcode'
					}
				]
			};
		},
		onShow() {
			
		},
		methods: {
			toShowSearchFu() {
				this.showSearchModel = true
			},
			toUnShowSearchFu() {
				this.showSearchModel = false
				this.searchKey = ''
			},
			toSearchFu( e) {
				this.searchKey= e.detail.value
			},
			navBarRightActionSelectedFu( obj ){
				this.$refs.navBarRef.setShowButModel()
				console.log('------'+JSON.stringify(obj))
				if(obj.id === '1'){//添加好友
						uni.navigateTo({
							url:'../contacts/friend/addFriend'
						})
				}
			}
		},
		created() {
			//初始化页面时 绑定 会话列表更新事件
		
			// #ifdef H5   
			 this.navBarRightActionList.splice(2,1)
			// #endif
			
				
			// let obj ={
			// 		uuid:"Q0PqGAim"
			// 	}
			
				// this.$ImHttp.post(`/imUser/userInfo.im`,obj).then(res =>{})
			
			/**
			 * 每3秒 登陆一次 登陆了则不登陆
			 */
			// setInterval(function(){
			// 	var booMock = false
			// 	this.BenderSdk.login(booMock)
			// },3000)
			
		}
	};
</script>

<style scoped>
	.view-add-icon-wx {
		margin-right: 150rpx;
	}

	.view-add-icon {
		margin-right: 20rpx;
	}

	.input-search-placeholder {
		padding: 5rpx;
	}
	.detail-view{
		margin-top: 20rpx;
	}
	
	.scroll-container {
		height: calc(100vh - 88rpx - 100rpx - env(safe-area-inset-bottom) - var(--status-bar-height));
	}
</style>
